import clubMemberInfo from "./components/clubMemberInfo";
import clubBaseInfo from "./components/clubBaseInfo";
import { DrawerFormStateType } from "./type";
export const drawerConfig = ({ handleAction, refreshTable }: any) => {
  const tabDict = [
    {
      label: getProxyT("base.baseInfo"),
      value: 1,
    },
    {
      label: getProxyT("base.memberInfo"),
      value: 2,
    },
  ];
  const updateStatus = async () => {
    await handleAction({
      record: defineDrawer.formState,
      type: "update->status",

      callback: () =>
        // @ts-ignore
        (defineDrawer.formState.status =
          defineDrawer.formState.status === 1 ? 0 : 1),
    });
  };
  const defineDrawer = {
    components: {
      clubBaseInfo,
      clubMemberInfo,
    },
    drawerInstance: ref(null),
    loading: ref(false),
    visible: ref(false),
    title: ref(""),
    width: "950px",
    maskClosable: true,
    formState: reactive<DrawerFormStateType>({
      type: 1,
      id: null,
      im_groupid: null,
      name: null,
      personNum: null,
      nickname: null,
      uid: null,
      introduction: null,
      status: null,
      sex: null,
      created_at: null,
      updated_at: null,
      avatar: null,
    }),
    slot: {
      extra_form_item: () => {
        const { formState } = defineDrawer;
        return (
          <>
            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-tabs vModel:activeKey={formState.type}>
                  {tabDict.map(({ label, value }: any) => (
                    <a-tab-pane key={value} tab={label?.value ?? label} />
                  ))}
                </a-tabs>
              </a-col>
            </a-row>
            {formState.type === 1 ? (
              <clubBaseInfo
                formState={formState}
                onUpdateStatus={updateStatus}
              />
            ) : (
              <clubMemberInfo im_groupid={formState.im_groupid} />
            )}
          </>
        );
      },
      extra: () => (
        <>
          <a-button
            icon={renderIcon("icon-tubiao_tijiao")}
            type="primary"
            onClick={() => (defineDrawer.visible.value = false)}
          >
            {$t("base.ok")}
          </a-button>
        </>
      ),
    },
  };
  return defineDrawer;
};
